<!--  -->
<template>
  <div class="container">
    <div class="progress-container">
      <div class="progress"></div>
      <div class="circleSty">
        <div v-for="(item, index) in state.list" :key="index" class="circle">
          {{ item }}
        </div>
      </div>
    </div>
    <button class="btn" id="penv">上一步</button>
    <button class="btn" id="next">下一步</button>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";

const state = reactive({
  list: [1, 2, 3, 4],
  step: 1,
});

const updateStep = (operate) => {
  const prog = document.getElementsByClassName("progress");
  prog[0].style.width =
    ((state.step - 1) / (state.list.length - 1)) * 100 + "%";
  const circleDom = document.getElementsByClassName("circle");
  if (operate === "next") {
    circleDom[state.step - 1].classList.add("active");
  } else {
    circleDom[state.step].classList.remove("active");
  }
};
onMounted(() => {
  const penv = document.getElementById("penv");
  penv.addEventListener("click", () => {
    state.step--;
    if (state.step < 1) {
      state.step = 1;
    }
    updateStep("penv");
  });

  const next = document.getElementById("next");
  next.addEventListener("click", () => {
    state.step++;
    if (state.step > state.list.length) {
      state.step = state.list.length;
    }
    updateStep("next");
  });
});
</script>
<style lang="scss" scoped>
.container {
  width: 600px;
  margin: 0 auto;
  .progress-container {
    position: relative;
    .progress {
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      background: blue;
      width: 0%;
      height: 3px;
      z-index: -1;
    }
    .circleSty {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .circle {
        background: #fff;
        color: #ccc;
        border: 3px solid #e0e0e0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .circle:nth-of-type(1) {
        color: blue;
        border: 3px solid blue;
      }
      .active {
        color: blue;
        border: 3px solid blue;
        background: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .progress-container::before {
    content: "";
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: #e0e0e0;
    width: 100%;
    height: 3px;
    z-index: -1;
  }

  .btn {
    margin: 10px;
    padding: 5px;
    color: #fff;
    background: blue;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
